<template>
  <div class="wrap">
    <div>
        <div class="d_wrap" v-if="collectlist">
        <div v-for="(item, i) in collectlist" :key="i">
          <span class="el-icon-close del" @click="del(item)"></span>
          <img
            :src="'http://47.115.85.237:3000/' + item.product_picture"
            alt=""
          />
          <p>{{ item.product_name }}</p>
          <p>{{ item.product_title }}</p>

          <p>
            <span style="color: orange;"
              ><big
                ><b>￥{{ item.product_selling_price }}</b></big
              ></span
            >
            &emsp;
            <del style="color: #ccc;">￥{{ item.product_price }}</del>
          </p>
        </div>
      </div>
      <div v-else>
        <h1>暂无收藏</h1>
      </div>
    
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      collectlist: [],
      visible: false,
    };
  },
  mounted() {
    this.$axios
      .post("/api/user/collect/getCollect", {
        user_id: this.$store.state.user_id,
      })
      .then((res) => {
        this.collectlist = res.data.collectList;
      });
  },
  methods: {
    del(item) {
      console.log(item);
      this.$axios
        .post("/api/user/collect/deleteCollect", {
          user_id: this.$store.state.user_id,
          product_id: item.product_id,
        })
        .then((res) => {
          console.log(res);
          alert(res.data.msg);
          this.$axios
            .post("/api/user/collect/getCollect", {
              user_id: this.$store.state.user_id,
            })
            .then((res) => {
              this.collectlist = res.data.collectList;
            });
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.d_wrap {
  width: 1400px;
  display: flex;
  margin: 0 auto;
  flex-wrap: wrap;
  //   background-color: #ccc;
  min-height: 600px;
  div {
    background-color: #fff;
    height: 300px;
    margin: 10px;
    position: relative;
    // transition: all 1s;
    .del {
      // background-color: violet;
      position: absolute;
      top: 10px;
      right: 5px;
      display: inline-block;
      width: 20px;
      height: 20px;
      color: #fff;
    }
    img {
      width: 229px;
      height: 229px;
    }
  }
  div:hover {
    box-shadow: 5px 5px 5px 5px rgb(241, 12, 12);
    scale: 0.5;
    .del {
      color: #ccc;
    }
  }
}
</style>
